<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page_nav_bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->
    <input type="file" hidden ref="file" @change="inputChange">
    <van-cell @click="$refs.file.click()" title="头像" is-link>
      <van-image class="avatar" fit="cover" round :src="users.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      @click="isShowEditNikename = true"
      :value="users.name"
      is-link
    />
    <van-cell
      title="性别"
      @click="isShowEditGender = true"
      :value="users.gender ? '女' : '男'"
      is-link
    />
    <van-cell @click="isShowEditBirthday = true" title="生日" :value="users.birthday" is-link />
    <!-- 昵称 -->
    <van-popup
      v-model="isShowEditNikename"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <EditNikename
        v-if="isShowEditNikename"
        v-model="users.name"
        @clickLeft="isShowEditNikename = false"
      />
    </van-popup>
    <!-- 性别 -->
    <van-popup
      v-model="isShowEditGender"
      position="bottom"
    >
      <EditGender v-if="isShowEditGender" v-model="users.gender" @cancel="isShowEditGender = false" />
    </van-popup>
      <!-- 生日 -->
    <van-popup
      v-model="isShowEditBirthday"
      position="bottom"
    >
      <EditBirthday v-if="isShowEditBirthday" v-model="users.birthday" @cancel="isShowEditBirthday = false" />
    </van-popup>
    <!-- 头像 -->
    <van-popup
      v-model="isShowEditAvatar"
      position="bottom"
      style="height: 100%"
    >
    <EditAvatar @onSuccess="users.photo = $event" @cancel="isShowEditAvatar = false" :imgUrl="imgUrl" />
    </van-popup>
  </div>
</template>

<script>
import EditNikename from './components/EditNikename.vue'
import EditGender from './components/EditGender.vue'
import EditBirthday from './components/EditBirthday.vue'
import EditAvatar from './components/EditAvatar.vue'
import { getUserProfile } from '@/api/user.js'
export default {
  name: 'User',
  data () {
    return {
      users: {},
      isShowEditNikename: false,
      isShowEditGender: false,
      isShowEditBirthday: false,
      isShowEditAvatar: false,
      imgUrl: ''
    }
  },
  components: {
    EditNikename,
    EditGender,
    EditBirthday,
    EditAvatar
  },
  created () {
    this.loadUserProfile()
  },
  // 定义方法
  methods: {
    async loadUserProfile () {
      const { data: res } = await getUserProfile()
      this.users = res.data
    },
    inputChange (e) {
      this.isShowEditAvatar = true
      const files = e.target.files[0]
      this.imgUrl = URL.createObjectURL(files)
      e.target.value = ''
    }
  }
}
</script>

<style scoped lang="less">
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
}
</style>
